<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogFormVisible"
      @updata:dialogFormVisible="getdialogFormVisible"
      class="add-dialog"
    >
      <el-form :model="form" ref="form" :rules="rules" class="bumen-add-from">
        <el-form-item
          label="部门名称:"
          prop="name"
          :label-width="formLabelWidth"
          v-if="input"
        >
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item
          label="请输入密码:"
          prop="password"
          :label-width="formLabelWidth"
          v-if="input1"
        >
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item
          label="再次输入密码:"
          prop="resetpassword"
          :label-width="formLabelWidth"
          v-if="input2"
        >
          <el-input v-model="form.resetpassword"></el-input>
        </el-form-item>
        <el-form-item
          label="职能描述:"
          prop="description"
          :label-width="formLabelWidth"
          v-if="textarea"
        >
          <el-input
            type="textarea"
            v-model="form.description"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="员工数量:"
          prop="employees"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.employees" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item
          label="添加时间:"
          :label-width="formLabelWidth"
          prop="createTime"
          v-if="date"
        >
          <el-date-picker
            v-model="form.createTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy/MM/dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item
          label="是否启用:"
          prop="isUsed"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="form.isUsed"
            placeholder="请选择是否使用true or false"
          >
            <el-option label="true" :value="true"></el-option>
            <el-option label="false" :value="false"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hidd">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DiaLog",
  data() {
    let password = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.resetpassword !== "") {
          this.$refs.form.validateField("resetpassword");
        }
        callback();
      }
    };
    let resetpassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    let bumenName = (rule, value, callback) => {
      if (/^[\u2E80-\u9FFF]+$/.test(value)) {
        return callback();
      }
      callback(new Error("只能输入汉字"));
    };
    let miao = (rule, value, callback) => {
      if (/^[\u2E80-\u9FFF]+$/.test(value)) {
        return callback();
      }
      callback(new Error("只能输入汉字"));
    };
    // let count = (rule, value, callback) => {
    //   if (/^\d+$/.test(value)) {
    //     return callback();
    //   }
    //   callback(new Error("只能输入数字"));
    // };
    return {
      formLabelWidth: "120px",
      form: {
        name: "",
        description: "",
        // employees: "",
        createTime: "",
        // isUsed: "",
        password: "",
        resetpassword: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 6, message: "长度位2到6个字符", trigger: "blur" },
          { validator: bumenName, trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { validator: miao, trigger: "blur" },
        ],
        // employees: [
        //   { required: true, message: "请输入员工数量", trigger: "blur" },
        //   { min: 1, max: 3, message: "长度位1到3个字符", trigger: "blur" },
        //   { validator: count, trigger: "blur" },
        // ],
        createTime: [
          { required: true, message: "请选择时间", trigger: "blur" },
        ],
        password: [{ validator: password,message:"请输入密码", trigger: "blur" }],
        resetpassword: [{ validator: resetpassword,message:"请再次输入密码", trigger: "blur" }],
      },
    };
  },
  props: {
    dialogFormVisible: {
      Boolean,
      default: false,
    },
    title: String,
    form1: {
      Object,
      default: null,
    },
    input: {
      Boolean,
      default: false,
    },
    input1: {
      Boolean,
      default: false,
    },
    input2: {
      Boolean,
      default: false,
    },
    date: {
      Boolean,
      default: false,
    },
    textarea: {
      Boolean,
      default: false,
    },
  },
  created() {},
  watch: {
    form1: {
      handler() {
        this.form.name = this.getform.name;
        this.form.description = this.getform.description;
        this.form.createTime=this.getform.createTime;
      },
      deep: true,
    },
  },
  computed: {
    getform() {
      return this.form1;
    },
  },
  methods: {
    hidd() {
      this.$emit("update:dialogFormVisible", false);
    },
    getdialogFormVisible(value) {
      this.$emit("update:dialogFormVisible", value);
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("save", this.form, () => this.$refs.form.resetFields());
        }
        // else{
        //     console.log("000")
        // }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add-dialog {
  // width: 600px;
  // position: absolute;
  // left: 32%;
  // top: 10%;
  & ::v-deep .el-dialog {
    // width: 100%;
    // margin: 0;
    width: 40%;
    min-width: 450px;;
  }
  & ::v-deep .el-dialog__header {
    background-color: rgb(232, 232, 232);
  }
  & .bumen-add-from {
    width: 400px;
    margin: 0 auto;
  }
}
::v-deep .el-dialog__wrapper {
  overflow: visible;
}
::v-deep .el-dialog__headerbtn {
  display: none;
}
</style>